{% extends 'layout.html' %}
{% block content %}
    <div class="row">
        {# 柱状图 #}
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">商品品牌数据可视化</div>
                <div class="panel-body">
                    <div id="main" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main', '商品品牌销售详情', '销售品牌数据统计', 'bar', '/system/work03/goods_sale_brand_show', 'y_list');
                        });

                        // 初始化图表的通用函数
                        function initChart(divId, titleText, subTitleText, chartType, url, dataKey) {
                            try {
                                var myChart = echarts.init(document.getElementById(divId));
                                var option = {
                                    title: {
                                        text: titleText,
                                        subtext: subTitleText,
                                        left: 'center',
                                        textStyle: {
                                            color: '#333',
                                            fontSize: 18
                                        }
                                    },
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'shadow'
                                        },
                                        formatter: function (params) {
                                            var tooltip = params[0].name + '<br/>';
                                            params.forEach(function (param) {
                                                tooltip += param.seriesName + ': ' + param.value + '<br/>';
                                            });
                                            return tooltip;
                                        }
                                    },
                                    legend: {
                                        data: ['销量', '销售额'],
                                        top: 'bottom',
                                        left: 'center'
                                    },
                                    xAxis: {
                                        type: 'category',
                                        data: [],
                                        axisLabel: {
                                            fontSize: 12,
                                            interval: 0,
                                            rotate: 30,
                                            show: false
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#999'
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        }
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            fontSize: 12
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: '#999'
                                            }
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        splitLine: {
                                            lineStyle: {
                                                color: ['#eee']
                                            }
                                        }
                                    },
                                    series: [
                                        {
                                            name: '销量',
                                            type: 'bar',
                                            data: [],
                                            itemStyle: {
                                                color: '#5470c6'
                                            }
                                        },
                                        {
                                            name: '销售额',
                                            type: 'bar',
                                            data: [],
                                            itemStyle: {
                                                color: '#91cc75'
                                            }
                                        }
                                    ]
                                };

                                if (chartType === 'line') {
                                    option.series = [
                                        {
                                            name: '价格',
                                            type: 'line',
                                            data: [],
                                            itemStyle: {
                                                color: '#5470c6'
                                            }
                                        }
                                    ];
                                }

                                $.ajax({
                                    url: url,
                                    type: "get",
                                    dataType: "JSON",
                                    success: function (res) {
                                        try {
                                            if (res.status && res.data && res.data.x_list && res.data[dataKey]) {
                                                option.xAxis.data = res.data.x_list;
                                                option.series = res.data[dataKey];
                                                myChart.setOption(option);
                                            } else {
                                                console.error('无效的响应数据');
                                            }
                                        } catch (e) {
                                            console.error('设置图表选项时出错:', e);
                                        }
                                    },
                                    error: function (xhr, status, error) {
                                        console.error('AJAX 请求失败:', error);
                                        alert('数据加载失败，请稍后重试');
                                    }
                                });
                            } catch (e) {
                                console.error('初始化图表时出错:', e);
                            }
                        }
                    </script>
                </div>
            </div>
        </div>

        {# 图2，对应商品价格 #}
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">商品品牌数据可视化</div>
                <div class="panel-body">
                    <div id="main2" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main2', '商品价格详情', '销售价格数据展示', 'line', '/system/work03/goods_sale_brand_show', 'y2_list');
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="col-sm-6">

            <div class="panel panel-default">
                <div class="panel-heading">商品品牌数据可视化</div>
                <div class="panel-body">
                    <div id="main3" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main3', '商品品牌详情', '品牌平均评分数据展示', 'line', '/system/work03/goods_sale_brand_show', 'y3_list');
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="col-sm-6">

            <div class="panel panel-default">
                <div class="panel-heading">商品品牌数据可视化</div>
                <div class="panel-body">
                    <div id="main4" style="width: 400px; height: 400px"></div>
                    <script type="text/javascript">
                        $(function () {
                            initChart('main4', '商品品牌详情', '品牌平均销量数据展示', 'line', '/system/work03/goods_sale_brand_show', 'y4_list');
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
{% endblock %}